<template>
  <div>
    <el-button @click="avisiable=true">打开我的</el-button>
    <el-dialog style="width:100%;height: 100%;" v-model="avisiable">
      <div style="width:100vw;height: 100vh;">
       <SnakerFlowDesigner2 ref='designer' v-model="flowDataRef" @on-save="handleSave"/>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineExpose } from 'vue'
import SnakerFlowDesigner from '@/SnakerFlowDesigner'
import { ElDrawer } from 'element-plus'

const propertSettingRef = ref(null)
const dialogVisible = defineModel({
  default: false
})
const avisiable = ref(false)
// const dialogVisible = ref(false);
import demojson from './demo.json'
const flowDataRef = ref()

const props = defineProps({
  flowData: {
    type: Object,
    required: false
  },
  record: {
    type: Object,
    required: false
  }
})
const drawer = ref(false);

onMounted(() => {
  flowDataRef.value = demojson;
  // flowDataRef.value = props.flowData
  // dialogVisible.value = true;
  console.log('Demo onMounted', new Date())
})

function handleClick() {
  propertSettingRef.value.show();
}

function handleSave(data){
  console.log('模拟保存', props.record)
  console.log('模拟保存2', data)
}

function handleCloseModal(){
  dialogVisible.value = false
}

function active1() {
  dialogVisible.value = true
}

function popeldrawer() {
  console.log('弹出抽屉方法')
}

function handleClose() {
  drawer.value = false;
}

defineExpose({
  active1
})

</script>

<style scoped>

</style>
